import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import 'antd/dist/antd.css';
import style from './index.module.css';
import { Table, Popconfirm, message, Button, Modal, Input } from 'antd';
import { timestampToTime } from '../../utils/date';
import { getExperienceList, delExperience, searchExperience } from './api';
import ExperienceForm from './Form';
const { Top, Add, Title, Contents, Action } = style;

export default function Experience(props) {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: 220,
      fontSize: '',
      render: (title) => <span className={Title}>{title}</span>,
    },
    {
      title: '内容',
      dataIndex: 'contents',
      key: 'contents',
      width: 600,
      render: (contents) => <span className={Contents}>{contents}</span>,
    },
    {
      title: '图片',
      dataIndex: 'imgUrl',
      key: 'imgUrl',
      render: (imgUrl) => <img src={imgUrl}></img>,
    },
    {
      title: '日期',
      dataIndex: 'date',
      key: 'date',
      render: (date) => <span>{timestampToTime(date * 1)}</span>,
      width: 120,
    },
    {
      title: '操作',
      key: 'action',
      render: (record) => (
        <div className={Action}>
          <a
            onClick={(e) => {
              showModal(e, record);
            }}
          >
            修改
          </a>
          <Popconfirm
            placement="topRight"
            title={delText}
            onConfirm={(e) => {
              delConfirm(record);
            }}
            okText="确认"
            cancelText="取消"
          >
            <a>删除</a>
          </Popconfirm>
        </div>
      ),
      width: 120,
    },
  ];
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [FormValueFa, setFormValueFa] = useState({});
  const [CommonSenseCardList, setList] = useState([]);
  const [action, setAction] = useState('');

  useEffect(() => {
    const timeout = setTimeout(() => verifyIsLogin(), 300);
    return () => clearTimeout(timeout);
    async function verifyIsLogin() {
      await getExperienceList().then((res) => {
        // console.log(res);
        setList(res.data);
      });
    }
  }, []);

  const delText = '确定删除?';

  function delConfirm(record) {
    // console.log(record, 'record');
    delExperience(record.id).then((res) => {
      console.log(res, '删除宠物常识');
      getExperienceList().then((res) => {
        console.log(res, '获取宠物常识列表');
        setList(res.data);
      });
    });
    message.success('删除成功');
  }

  function showModal(e, value) {
    // console.log(e.target.innerHTML, 'e.target.innerHTML');
    if (e.target.innerHTML == '修改') {
      setAction('修改');
      // console.log(value);
      setFormValueFa(value);
      // console.log(FormValueFa, 'FormValueFa');
      setIsModalVisible(true);
    } else {
      setAction('添加');
      setFormValueFa('');
      setIsModalVisible(true);
    }
  }

  const handleOk = () => {
    getExperienceList().then((res) => {
      console.log(res, '获取宠物常识列表');
      setList(res.data);
    });
    setIsModalVisible(false);
    message.success('添加成功');
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    message.info('已取消');
  };

  const { Search } = Input;

  const onSearch = (value) => {
    // console.log(value);
    searchExperience(value).then((res) => {
      console.log(res, '搜索宠物常识');
      setList(res.data);
    });
  };

  return (
    <div>
      <div className={Top}>
        <Button
          type="primary"
          className={Add}
          onClick={(e) => {
            showModal(e, '');
          }}
        >
          添加
        </Button>
        <Search
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={onSearch}
          style={{ width: 400 }}
        />
      </div>
      <Modal
        visible={isModalVisible}
        title="添加宠物常识"
        onOk={handleOk}
        onCancel={handleCancel}
        footer={[]}
        closable={false}
        maskClosable={false}
      >
        <ExperienceForm
          handleOk={handleOk}
          handleCancel={handleCancel}
          FormValueFa={FormValueFa}
          action={action}
        ></ExperienceForm>
      </Modal>
      <Table
        columns={columns}
        dataSource={CommonSenseCardList}
        pagination={{ pageSize: 5 }}
      />
    </div>
  );
}
